<template>
    <div class="brokerd">
        <div class="head">
            <div class="he">
                <img class="he-img" src="../../assets/image/30.png" alt="">
            </div>
            <div class="xie">
                <p class="home">首页</p>>
                <p class="zhu">注册经纪商</p>
            </div>
        </div>
        <div class="content">
            <div class="cont">
               <div class="ming" v-for="(item,index) in divs" @click="isshow=!isshow" :key="index">
                    <p class="qi">{{item.name}}</p><input type="text" :class="{biao: !isshow,qiye: isshow}" class="qiye biao">
               </div>
               <div class="run">
                   <p class="ce">经营范围</p><input Rows="140px" type="textarea" class="che">
               </div>
               <div class="you">
                   <img class="y" src="../../assets/image/xxx.png" alt="">
                   <p class="left">请填写正确的邮箱地址</p>
               </div>
               <button class="btn">提交</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'brokerd',
    data(){
        return{
            divs:[
                {name:'企业名称'},
                {name:'法人代表'},
                {name:'注册资本'},
                {name:'注册地址'},
                {name:'企业网址'},
                {name:'企业类型'},
                {name:'企业代码'},
                {name:'税务号码'},
                {name:'Email'},
                {name:'联系电话'},
                {name:'经营范围'},
            ],
            isshow: 1
        }
    },
    methods:{
        cons(index){
            this.con=index;
        },
        inxs(index){
            this.inx=index;
        }
    }
}
</script>

<style lang="scss" scoped>
.brokerd{
    width: 100%;
    background: #f3f3f3;
    .head{
        width: 100%;
        background: #fff;
        .he{
            width: 100%;
            height: 100%;
            .he-img{
                width: 100%;
                height: 100%;
            }
        }
        .xie{
            width: 1200px;
            height: 40px;
            margin: 0 auto;
            border-bottom: 2px solid #ccc;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .home{
                color: #ccc;
                font-size: 14px;
            }
            .zhu{
                color: #ff6600;
                font-size: 14px;
            }
        }
    }
    .content{
        width: 1200px;
        margin: 0 auto;
        background: #fff;
        .cont{
            width: 1200px;
            padding: 94px 0;
            box-sizing: border-box;
            .ming{
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                margin-top: 10px;
                .qi{
                    width: 6%;
                    text-align: left;
                }
                .qiye{
                    width: 50%;
                    height: 36px;
                    outline: none;
                    border: 1px solid #ffcc98;
                    background: #f6f6f6;
                    border-radius: 10px;
                    margin-left: 10px;
                }
                .biao{
                    border: 1px solid #ccc;
                }
            }
            .run{
                display: flex;
                justify-content: center;
                font-size: 16px;
                margin-top: 10px;
                .ce{
                    width: 6%;
                    text-align: left;
                    margin-top: 10px;
                }
                .che{
                    width: 50%;
                    padding: 10px 0 110px 0;
                    outline: none;
                    white-space: normal;
                    border: 1px solid #ccc;
                    background: #f6f6f6;
                    border-radius: 10px;
                    margin-left: 10px;
                }
            }
            .you{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 31px 0;
                margin-left: 29%;
                .y{
                    width: 14px;
                    height: 14px;
                    margin-left: 10px;
                }
                .left{
                    font-size: 14px;
                    color: #ff6500;
                }
            }
            .btn{
                width: 17%;
                font-size: 16px;
                background: #ff6700;
                color: #fff;
                margin-left: 42%;
                outline: none;
                border: none;
                border-radius: 2px;
                height: 30px;
            }
        }
    }
    
}
</style>

